<template>
  <div class="viewEquip-containner">
    <el-row :gutter="20" class="seachnav">
      <el-col :xs="7" :sm="6" :md="4" :lg="6" :xl="4">
        <span><router-link  :to="{path:'/monitor/system/iots'}"><img :src="returnnormalpress" class="returnnormalpress"/></router-link></span>
        <span><img :src="realtimeindex" class="equiplist"/></span>
        <span class="description">设备管理</span>
      </el-col>
    </el-row>
    <div class="equipNav clearfix">
      <div class="leftTop">
        <p class="leftTitle">新增设备</p>
      </div>
      <!--<div class="rightBtn" @click="goBack()">-->
        <!--< 返回-->
      <!--</div>-->
    </div>
    <div class="formContent">
      <div class="firstTitle">
        <span class="info">基本信息</span>
        <span class="down" @click="open1"><i class="el-icon-arrow-down"></i></span>
      </div>
      <!-- -->
      <div class="firstContent" v-show="openContent">
        <div class="contentInfo1" >
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                <span style="color: #DE6669;">*</span>
                出厂编号：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input @blur.prevent="checkcid()" maxlength="20" v-model="equipform.equip_cid" />
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                <span style="color: #DE6669;">*</span>
                状态：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <el-select v-model="equipform.status" placeholder="请选择">
                  <el-option
                    v-for="item in cranestatusoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                <span style="color: #DE6669;">*</span>
                名称：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-select v-model="equipform.name" placeholder="请选择">
                  <el-option
                    v-for="item in nameoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                <span style="color: #DE6669;">*</span>
                品牌：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <el-select v-model="equipform.brand" placeholder="请选择">
                  <el-option
                    v-for="item in brandoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                <span style="color: #DE6669;">*</span>
                类型：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-select v-model="equipform.type" placeholder="请选择">
                  <el-option
                    v-for="item in cranetypeoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                型号：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input maxlength="32" v-model="equipform.model"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                操作方式：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-select v-model="equipform.operation_mode" placeholder="请选择">
                  <el-option
                    v-for="item in operationmodeoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                结构形式：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input maxlength="20" v-model="equipform.structure"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                <span style="color: #DE6669;">*</span>
                跨度(m)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input type="number" @input="oninput" oninput="if(value.length>15)value=value.slice(0,15)" v-model="equipform.span"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                <span style="color: #DE6669;">*</span>
                工作级别：
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">
                <el-select v-model="equipform.work_level" placeholder="请选择">
                  <el-option
                    v-for="item in workleveloptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                大车轨道长度(m)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input type="number" @input="oninput" oninput="if(value.length>15)value=value.slice(0,15)" v-model="equipform.big_car_track_length"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                轨道型号：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input maxlength="20" v-model="equipform.big_car_track_model"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                <span style="color: #DE6669;">*</span>
                起升高度(m)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input type="number" @input="oninput" oninput="if(value.length>15)value=value.slice(0,15)" v-model="equipform.lifting_height"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                <span style="color: #DE6669;">*</span>
                额定功率(kW)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input type="number" @input="oninput" oninput="if(value.length>15)value=value.slice(0,15)" v-model="equipform.whole_rated_power"/>
              </div>
            </el-col>
          </el-row>
          <div class="bigCarRated" style="border: 1px dotted #ccc;">
            <el-table class="linkageTable" :show-header="false" :data="liftingRated">
              <el-table-column class="boxLeft">
                <template slot-scope="scope">
                  <div class="videoBlock clearfix" style="margin-top: 10px;">
                    <div class="smallLeft">
                      <span style="display: inline-block; text-indent: 18px"><span style="color: #DE6669;">*</span>主起升机构{{scope.$index + 1}}#功率(kW)：</span>
                      <input type="number" @input="oninput" oninput="if(value.length>15)value=value.slice(0,15)" v-if="scope.$index < 3" class="smallInput" v-model="liftingRated[scope.$index].power"/>
                    </div>
                    <div class="mainRight">
                      <span><span style="color: #DE6669;">*</span>主起升机构{{scope.$index + 1}}#电流(A)：</span>
                      <input type="number" @input="oninput" oninput="if(value.length>15)value=value.slice(0,15)" v-if="scope.$index < 3" class="smallInput" v-model="liftingRated[scope.$index].current"/>
                    </div>
                  </div>
                  <div class="videoBlock clearfix" style="margin-top: 10px; margin-bottom: 10px;">
                    <div class="smallLeft">
                      <span style="display: inline-block;text-indent: 34px;"><span style="color: #DE6669;">*</span>主起升{{scope.$index + 1}}#额定重量(t)：</span>
                      <input type="text"  oninput="if(value.length>15)value=value.slice(0,15)" v-if="scope.$index < 3" class="smallWeightInput" v-model="liftingRated[scope.$index].weight_standard" placeholder="规格"/>
                      <input type="number" @input="oninput" oninput="if(value.length>15)value=value.slice(0,15)" v-if="scope.$index < 3" class="smallWeightInput" v-model="liftingRated[scope.$index].weight" placeholder="额定重量" style="margin-right: 10px"/>
                    </div>
                    <div class="mainSpeedRight">
                      <span style="color: #DE6669;">*</span>
                      <span>主起升{{scope.$index + 1}}#速度(m/min)：</span>
                      <input type="text" oninput="if(value.length>15)value=value.slice(0,15)" v-if="scope.$index < 3" class="smallInput" v-model="liftingRated[scope.$index].speed"/>
                    </div>
                  </div>
                  <!--<el-input v-model="addlinkageVideo[scope.$index].name"></el-input>-->
                </template>
              </el-table-column>
              <el-table-column  class="boxRight">
                <template  slot-scope="scope">
                  <div class="smallBtn">
                    <el-button v-if="scope.$index < 1" class="tableIcon" title="添加" type="text" size="small" @click="liftingRatedAdd(scope.$index)"><i class="el-icon-plus"></i></el-button>
                    <el-button v-if="scope.$index > 0" class="tableIcon" title="删除" type="text" size="small" @click="liftingRatedDelete(scope.$index)"><i class="el-icon-minus"></i></el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="smallCarRated" style="border: 1px dotted #ccc; margin-top: 5px">
            <el-table class="linkageTable" :show-header="false" :data="smallCarRated">
              <el-table-column class="boxLeft">
                <template slot-scope="scope">
                  <div class="videoBlock clearfix" style="margin-top: 10px;">
                    <div class="smallLeft">
                      <span style="display: inline-block;text-indent: 28px"><span style="color: #DE6669;">*</span> 小车机构{{scope.$index + 1}}#功率(kW)：</span>
                      <input type="text" oninput="if(value.length>15)value=value.slice(0,15)" v-if="scope.$index < 3" class="smallWeightInput" v-model="smallCarRated[scope.$index].power_standard" placeholder="规格"/>
                      <input type="number" @input="oninput" oninput="if(value.length>15)value=value.slice(0,15)" v-if="scope.$index < 3" class="smallWeightInput" v-model="smallCarRated[scope.$index].power" placeholder="总功率" style="margin-right: 10px"/>
                    </div>
                    <div class="smallRight">
                      <span style="display: inline-block;text-indent: 28px"><span style="color: #DE6669;">*</span> 小车机构{{scope.$index + 1}}#电流(A)：</span>
                      <input type="text" oninput="if(value.length>15)value=value.slice(0,15)" v-if="scope.$index < 3" class="smallWeightInput" v-model="smallCarRated[scope.$index].current_standard" placeholder="规格"/>
                      <input type="number" @input="oninput" oninput="if(value.length>15)value=value.slice(0,15)" v-if="scope.$index < 3" class="smallWeightInput" v-model="smallCarRated[scope.$index].current" placeholder="总电流" style="margin-right: 10px"/>
                    </div>
                  </div>
                  <div class="videoBlock clearfix" style="margin-top: 10px; margin-bottom: 10px;">
                    <div style="width: 890px;">
                      <span style="display: inline-block; text-indent: 1px;"><span style="color: #DE6669;">*</span> 小车{{scope.$index + 1}}#运行速度(m/min)：</span>
                      <input type="text" oninput="if(value.length>15)value=value.slice(0,15)" v-if="scope.$index < 3" class="longInput" v-model="smallCarRated[scope.$index].speed"/>
                    </div>
                  </div>
                  <!--<el-input v-model="addlinkageVideo[scope.$index].name"></el-input>-->
                </template>
              </el-table-column>
              <el-table-column  class="boxRight">
                <template  slot-scope="scope">
                  <div class="smallBtn">
                    <el-button v-if="scope.$index < 1" class="tableIcon" title="添加" type="text" size="small" @click="smallCarRatedAdd(scope.$index)"><i class="el-icon-plus"></i></el-button>
                    <el-button v-if="scope.$index > 0" class="tableIcon" title="删除" type="text" size="small" @click="smallCarRatedDelete(scope.$index)"><i class="el-icon-minus"></i></el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="smallCarRated" style="margin-top: 5px">
            <el-table class="linkageTable" :show-header="false" :data="bigCarRated">
              <el-table-column class="boxLeft">
                <template slot-scope="scope">
                  <div class="videoBlock clearfix" style="margin-top: 10px;">
                    <div class="smallLeft">
                      <span style="display: inline-block;text-indent: 34px">大车机构{{scope.$index + 1}}#功率(kW)：</span>
                      <input type="text" oninput="if(value.length>15)value=value.slice(0,15)" v-if="scope.$index < 3" class="smallWeightInput" v-model="bigCarRated[scope.$index].power_standard" placeholder="规格"/>
                      <input type="number" @input="oninput" oninput="if(value.length>15)value=value.slice(0,15)" v-if="scope.$index < 3" class="smallWeightInput" v-model="bigCarRated[scope.$index].power" placeholder="总功率" style="margin-right: 10px"/>
                    </div>
                    <div class="smallRight">
                      <span style="display: inline-block;text-indent: 28px"><span style="color: #DE6669;">*</span> 大车机构{{scope.$index + 1}}#电流(A)：</span>
                      <input type="text" oninput="if(value.length>15)value=value.slice(0,15)" v-if="scope.$index < 3" class="smallWeightInput" v-model="bigCarRated[scope.$index].current_standard" placeholder="规格"/>
                      <input type="number" @input="oninput" oninput="if(value.length>15)value=value.slice(0,15)" v-if="scope.$index < 3" class="smallWeightInput" v-model="bigCarRated[scope.$index].current" placeholder="总电流" style="margin-right: 10px"/>
                    </div>
                  </div>
                  <div class="videoBlock clearfix" style="margin-top: 10px; margin-bottom: 10px;">
                    <div style="width: 890px;">
                      <span style="display: inline-block; text-indent: 1px;"><span style="color: #DE6669;">*</span> 大车{{scope.$index + 1}}#运行速度(m/min)：</span>
                      <input type="text" oninput="if(value.length>15)value=value.slice(0,15)" v-if="scope.$index < 3" class="longInput" v-model="bigCarRated[scope.$index].speed"/>
                    </div>
                  </div>
                  <!--<el-input v-model="addlinkageVideo[scope.$index].name"></el-input>-->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!--<el-row>-->
            <!--<el-col :span="4" style="text-align: right">-->
              <!--<div class="grid-content bg-purple">-->
                <!--大车机构额定功率(kW)：-->
              <!--</div>-->
            <!--</el-col>-->
            <!--<el-col :span="5">-->
              <!--<div class="grid-content bg-purple">-->
                <!--<input type="number" @input="oninput" oninput="if(value.length>15)value=value.slice(0,15)" class="shortInput" v-model="bigCarRated.power" placeholder="总功率" style="margin-right: 9px"/>-->
                <!--<input type="number" @input="oninput" oninput="if(value.length>15)value=value.slice(0,15)" class="shortInput" v-model="bigCarRated.power_standard" placeholder="规格" style="float: right;margin-top: 6px"/>-->
              <!--</div>-->
            <!--</el-col>-->
            <!--<el-col :span="4">-->
              <!--<div class="grid-content bg-purple-light" style="text-align: right">-->
                <!--<span style="color: #DE6669;">*</span>-->
                <!--大车机构电流(A)：-->
              <!--</div>-->
            <!--</el-col>-->
            <!--<el-col :span="5">-->
              <!--<div class="grid-content bg-purple">-->
                <!--<input type="number" @input="oninput" oninput="if(value.length>15)value=value.slice(0,15)" class="shortInput" v-model="bigCarRated.current" placeholder="总电流" style="margin-right: 9px"/>-->
                <!--<input type="number" @input="oninput" oninput="if(value.length>15)value=value.slice(0,15)" class="shortInput" v-model="bigCarRated.current_standard" placeholder="规格" style="float: right;margin-top: 6px"/>-->
              <!--</div>-->
            <!--</el-col>-->
          <!--</el-row>-->
          <!--<el-row>-->
            <!--<el-col :span="4" style="text-align: right">-->
              <!--<div class="grid-content bg-purple">-->
                <!--<span style="color: #DE6669;">*</span>-->
                <!--大车运行速度(m/min)：-->
              <!--</div>-->
            <!--</el-col>-->
            <!--<el-col :span="10">-->
              <!--<div class="grid-content bg-purple">-->
                <!--<input class="longInput" type="number" @input="oninput" oninput="if(value.length>15)value=value.slice(0,15)" v-model="bigCarRated.speed"/>-->
              <!--</div>-->
            <!--</el-col>-->
          <!--</el-row>-->
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                安装位置：
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple">
                <input v-model="equipform.install_position" class="longInput"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                适用范围：
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple">
                <input v-model="equipform.range" class="longInput"/>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="twoTitle">
        <span class="info">管理信息</span>
        <span class="down" @click="open2"><i class="el-icon-arrow-down"></i></span>
      </div>
      <div class="twoContent" v-show="openContent1">
        <div class="contentInfo2">
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                <span style="color: #DE6669;">*</span>
                制造商：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input maxlength="20" v-model="equipform.manufacturer"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                所属项目：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input maxlength="20" v-model="equipform.project"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                <span style="color: #DE6669;">*</span>
                出厂日期：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-date-picker
                  v-model="equipform.produce_date"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                所属用户：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input maxlength="20" v-model="equipform.user_name"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                <span style="color: #DE6669;">*</span>
                保修期限(月)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input type="number" @input="oninput" oninput="if(value.length>15)value=value.slice(0,15)" v-model="equipform.defects_liability_period"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                所属车间：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input maxlength="20" v-model="equipform.workshop"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                厂家服务电话：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input maxlength="20" v-model="equipform.produce"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                设备负责人：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input maxlength="20" v-model="equipform.equip_person_liable"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                交付(取证)时间：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-date-picker
                  v-model="equipform.delivery_time"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                行业类别：
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">
                <el-select v-model="equipform.industry_type" placeholder="请选择">
                  <el-option
                    v-for="item in industrytypeoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                使用登记编号：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input maxlength="20" v-model="equipform.register_number"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                服务商名称：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input maxlength="20" v-model="equipform.service_provider"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                下次年审时间：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-date-picker
                  v-model="equipform.next_annual_trial"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                服务商联系人：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input maxlength="20" v-model="equipform.service_contacts"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                设备价格(万元)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input maxlength="20" v-model="equipform.equip_price"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                服务商联系电话：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input maxlength="20" v-model="equipform.service_tel"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                设备图片：
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple">
                <el-upload
                  class="upload-demo"
                  action=""
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :http-request="uploadImg"
                  multiple
                  :limit="1"
                  list-type="picture"
                  :on-exceed="handleExceed">
                  <el-button style="margin-bottom: 10px; color: #52C2D2;" size="small">点击上传</el-button>
                  <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                </el-upload>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                备注：
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple">
                <textarea v-model="equipform.remark"></textarea>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="equipFooter">
      <!--创朝夕相处-->
      <el-button :disabled="this.addbtn" type="primary" @click="addequip()">保存</el-button>
      <el-button type="info" @click="goBack()">取消</el-button>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import realtimeindex from '@/assets/home/management.png'
  import returnnormalpress from '@/assets/equipv2/returnnormalpress.png'
  export default {
    data() {
      return {
        realtimeindex,
        returnnormalpress,
        equipform: {
          cid: '',
          equip_cid: '',
          produce_number: '',
          type: '',
          operation_mode: '',
          equip_class: '',
          span: '',
          cantilever_length: '',
          name: '',
          brand: '',
          model: '',
          structure: '',
          work_level: '',
          big_car_track_model: '',
          big_car_track_length: '',
          status: '',
          tel: '',
          lifting_height: '',
          lifting_speed: '',
          big_car_speed: '',
          small_car_speed: '',
          rated_weight: '',
          whole_rated_power: '',
          lifting_rated_power: '',
          lifting_rated_current: '',
          lifting_rated: [],
          big_car_rated: [],
          small_car_rated: [],
          range: '',
          install_position: '',
          manufacturer: '',
          // 时间
          produce_date: '',
          // --------
          defects_liability_period: '',
          produce: '',
          // 时间
          delivery_time: '',
          // --------
          register_number: '',
          // 时间
          next_annual_trial: '',
          // --------
          equip_price: '',
          project: '',
          user_name: '',
          workshop: '',
          equip_person_liable: '',
          industry_type: '',
          service_provider: '',
          service_contacts: '',
          service_tel: '',
          remark: '',
          attachment: []
        },
        // 小车新增
        smallCarRated: [{}],
        // 大车新增
        bigCarRated: [{
          power: '',
          power_standard: '',
          current: '',
          current_standard: '',
          speed: ''
        }],
        // 按钮
        addbtn: false,
        // 主起升新增
        liftingRated: [{}],
        // 下拉框
        nameoptions: [],
        // classoptions: [],
        cranetypeoptions: [],
        brandoptions: [],
        cranestatusoptions: [],
        operationmodeoptions: [],
        workleveloptions: [],
        industrytypeoptions: [],
        // ---------------------------
        openContent: true,
        openContent1: true,
        show: '',
        // 图片上传
        fileList: [],
        // 获取起重机名称
        nameselectTable: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'equip_get_crane_name'
        },
        // 获取起重机类型
        cranetypeselectTable: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'equip_get_crane_type'
        },
        //        // 获取起重机分类
        //        classselectTable: {
        //          access_token: 'access_tokenxxxxxxxx',
        //          type: 'equip_get_class'
        //        },
        // 获取起重机品牌
        brandselectTable: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'equip_get_crane_brand'
        },
        // 获取起重机状态
        cranestatusselectTable: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'equip_get_crane_status'
        },
        // 获取操作方式
        operationmodeselectTable: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'equip_get_operation_mode'
        },
        // 获取工作级别
        worklevelselectTable: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'equip_get_work_level'
        },
        // 获取行业类别
        industrytypeselectTable: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'equip_get_industry_type'
        },
        // 新增接口
        addequipdata: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'equip_add',
          data: {}
        },
        // 编号验证
        checkciddata: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'equip_check_cid',
          id: ''
        }
      }
    },
    created: function() {
      this.show = document.getElementsByClassName('contentInfo1')
      console.log(333)
      console.log(this.show)
      this.openContent = true
    },
    mounted() {
      //      this.classselect()
      this.cranetypeselect()
      this.nameselect()
      this.brandselect()
      this.cranestatusselect()
      this.operationmodeselect()
      this.worklevelselect()
      this.industrytypeselect()
    },
    methods: {
      // 通过正则过滤小数点后两位
      oninput(e) {
        e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
      },
      goBack() {
        this.$router.push({ path: '/monitor/system/iots' })
      },
      open1() {
        this.openContent = !this.openContent
      },
      open2() {
        this.openContent1 = !this.openContent1
      },
      // 小车增加
      smallCarRatedAdd() {
        if (this.smallCarRated.length < 3) {
          this.smallCarRated.push({
            power: '',
            power_standard: '',
            current: '',
            current_standard: '',
            speed: ''
          })
        }
      },
      // 小车减少
      smallCarRatedDelete(index) {
        if (this.smallCarRated.length > 1) {
          this.smallCarRated.splice(index, 1)
        }
      },
      // 大车增加
      liftingRatedAdd() {
        if (this.liftingRated.length < 3) {
          this.liftingRated.push({
            power: '',
            current: '',
            weight: '',
            weight_standard: '',
            speed: ''
          })
        }
      },
      // 大车减少
      liftingRatedDelete(index) {
        if (this.liftingRated.length > 1) {
          this.liftingRated.splice(index, 1)
        }
      },
      // 图片上传
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePreview(file) {
        console.log(file)
      },
      handleExceed(files, fileList) {
        // this.$message.warning(`上传失败，当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
        this.$message.warning(`上传失败，当前限制选择 1 个文件。`)
      },
      uploadImg(item) {
        const formData = new FormData()
        formData.append('file', item.file)
        console.log(formData)
        console.log(item.file)
        // formData.append('group', 'system')
        axios.post('/equipmanage/upload', formData, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
          .then((res) => {
            this.equipform.attachment = res.data.datas
            console.log(res)
            console.log(this.equipform.attachment)
          })
          .catch((err) => {
            console.log(err, 'error')
          })
      },
      // 获取起重机名称
      nameselect() {
        axios.post('/basicdata', this.nameselectTable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.nameoptions = res.data.datas
          console.log(res.data.datas)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 获取起重机分类
      cranetypeselect() {
        axios.post('/basicdata', this.cranetypeselectTable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.cranetypeoptions = res.data.datas
          console.log(res.data.datas)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      //      // 获取起重机分类
      //      classselect() {
      //        axios.post('/basicdata', this.classselectTable, {
      //          headers: {
      //            'Content-Type': 'application/x-www-form-urlencoded'
      //          }
      //        }).then((res) => {
      //          this.classoptions = res.data.datas
      //          console.log(res.data.datas)
      //        })
      //          .catch(function(error) {
      //            console.log(error)
      //          })
      //      },
      // 获取起重机品牌
      brandselect() {
        axios.post('/basicdata', this.brandselectTable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.brandoptions = res.data.datas
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 获取起重机状态
      cranestatusselect() {
        axios.post('/basicdata', this.cranestatusselectTable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.cranestatusoptions = res.data.datas
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 获取操作方式
      operationmodeselect() {
        axios.post('/basicdata', this.operationmodeselectTable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.operationmodeoptions = res.data.datas
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 获取工作级别
      worklevelselect() {
        axios.post('/basicdata', this.worklevelselectTable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.workleveloptions = res.data.datas
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 获取行业类别
      industrytypeselect() {
        axios.post('/basicdata', this.industrytypeselectTable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.industrytypeoptions = res.data.datas
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 检测编号
      checkcid() {
        this.checkciddata.id = this.equipform.equip_cid
        axios.post('/equipmanage', this.checkciddata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          console.log(res)
          if (res.data.errcode === '00000') {
            this.$message({
              type: 'success',
              message: '该出厂编号可用'
            })
            this.addbtn = false
          }
        })
          .catch((error) => {
            console.log(error)
            if (error.data.errmsg === '[ 出厂编号 ] 不能为空！') {
              this.$message({
                type: 'error',
                message: '出厂编号不能为空！'
              })
              this.addbtn = true
            } else {
              this.$message({
                type: 'error',
                message: '该出厂编号已存在！'
              })
            }
          })
      },
      // 新增接口
      addequip() {
        this.equipform.lifting_rated = this.liftingRated
        this.equipform.small_car_rated = this.smallCarRated
        this.equipform.big_car_rated = this.bigCarRated
        this.addequipdata.data = this.equipform
        console.log(this.equipform.liftingRated)
        console.log(this.equipform.small_car_rated)
        console.log(this.equipform)
        axios.post('/equipmanage', this.addequipdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          if (res.data.errcode === '00000') {
            this.$router.push({ path: '/monitor/system/iots' })
          }
          console.log(res)
        })
          .catch((error) => {
            console.log(error)
            if (error.data.errmsg === '[ 设备名称 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请选择设备名称'
              })
            } else if (error.data.errmsg === '[ 状态 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请选择状态'
              })
            } else if (error.data.errmsg === '[ 出厂编号 ] 不能为空！') {
              this.$message({
                type: 'error',
                message: '请输入出厂编号'
              })
            } else if (error.data.errmsg === '[ 编号 ] 不能为空！') {
              this.$message({
                type: 'error',
                message: '请输入出厂编号'
              })
            } else if (error.data.errmsg === '[ 类型 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请选择类型'
              })
            } else if (error.data.errmsg === '[ 品牌 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请选择品牌'
              })
            } else if (error.data.errmsg === '[ 跨度 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写跨度'
              })
            } else if (error.data.errmsg === '[ 工作级别 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请选择工作级别'
              })
            } else if (error.data.errmsg === '[ 起升高度 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写起升高度'
              })
            } else if (error.data.errmsg === '[ 额定功率 ] 不能为空！') {
              this.$message({
                type: 'error',
                message: '请填写额定功率'
              })
            } else if (error.data.errmsg === '[ 起升速度 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写起升速度'
              })
            } else if (error.data.errmsg === '[ 起升机构 1#-功率 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写主起升机构功率'
              })
            } else if (error.data.errmsg === '[ 起升机构 2#-功率 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写主起升机构功率'
              })
            } else if (error.data.errmsg === '[ 起升机构 3#-功率 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写主起升机构功率'
              })
            } else if (error.data.errmsg === '[ 起升机构 1#-电流 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写主起升机构电流'
              })
            } else if (error.data.errmsg === '[ 起升机构 2#-电流 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写主起升机构电流'
              })
            } else if (error.data.errmsg === '[ 起升机构 3#-电流 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写主起升机构电流'
              })
            } else if (error.data.errmsg === '[ 起升机构 1#-重量 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写主起升机构额定重量'
              })
            } else if (error.data.errmsg === '[ 起升机构 2#-重量 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写主起升机构额定重量'
              })
            } else if (error.data.errmsg === '[ 起升机构 3#-重量 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写主起升机构额定重量'
              })
            } else if (error.data.errmsg === '[ 起升机构 1#-速度 ] 非空！') {
              this.$message({
                type: 'error',
                message: '请填写主起升机构速度'
              })
            } else if (error.data.errmsg === '[ 起升机构 2#-速度 ] 非空！') {
              this.$message({
                type: 'error',
                message: '请填写主起升机构速度'
              })
            } else if (error.data.errmsg === '[ 起升机构 3#-速度 ] 非空！') {
              this.$message({
                type: 'error',
                message: '请填写主起升机构速度'
              })
            } else if (error.data.errmsg === '[ 小车机构 1#-功率 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写小车机构功率'
              })
            } else if (error.data.errmsg === '[ 小车机构 2#-功率 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写小车机构功率'
              })
            } else if (error.data.errmsg === '[ 小车机构 3#-功率 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写小车机构功率'
              })
            } else if (error.data.errmsg === '[ 小车机构 1#-电流 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写小车机构电流'
              })
            } else if (error.data.errmsg === '[ 小车机构 2#-电流 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写小车机构电流'
              })
            } else if (error.data.errmsg === '[ 小车机构 3#-电流 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写小车机构电流'
              })
            } else if (error.data.errmsg === '[ 小车机构 1#-速度 ] 非空！') {
              this.$message({
                type: 'error',
                message: '请填写小车机构运行速度'
              })
            } else if (error.data.errmsg === '[ 小车机构 2#-速度 ] 非空！') {
              this.$message({
                type: 'error',
                message: '请填写小车机构运行速度'
              })
            } else if (error.data.errmsg === '[ 小车机构 3#-速度 ] 非空！') {
              this.$message({
                type: 'error',
                message: '请填写小车机构运行速度'
              })
            } else if (error.data.errmsg === '[ 大车机构-功率 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写大车机构功率'
              })
            } else if (error.data.errmsg === '[ 大车机构-功率规格 ] 非空！') {
              this.$message({
                type: 'error',
                message: '请填写大车机构功率规格'
              })
            } else if (error.data.errmsg === '[ 大车机构-电流 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写大车机构电流'
              })
            } else if (error.data.errmsg === '[ 大车机构-电流规格 ] 非空！') {
              this.$message({
                type: 'error',
                message: '请填写大车机构电流规格'
              })
            } else if (error.data.errmsg === '[ 大车运行速度 ] 非空！') {
              this.$message({
                type: 'error',
                message: '请填写大车运行速度'
              })
            } else if (error.data.errmsg === '[ 制造商 ] 不能为空！') {
              this.$message({
                type: 'error',
                message: '请填写制造商'
              })
            } else if (error.data.errmsg === '[ 出厂日期 ] 格式不正确！') {
              this.$message({
                type: 'error',
                message: '请选择出厂日期'
              })
            } else if (error.data.errmsg === '[ 保修期 ] 非法类型！') {
              this.$message({
                type: 'error',
                message: '请填写保修期限'
              })
            }
          })
      }
    }
  }

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .viewEquip-containner{
    .seachnav{
      width: 60%;
      height: 50px;
      position: fixed;
      z-index: 2;
      top:0;
      bottom: 0;
      line-height: 55px;
      padding-left: 20px;
      .description{
        font-size: 18px;
        color: #333;
        line-height: 10px;
        padding-left: 10px;
      }
      .returnnormalpress{
        vertical-align: middle;
      }
      .equiplist{
        vertical-align: middle;
        margin-left: 10px;
      }
      .searchinvalid{
        vertical-align: middle;
      }
      .con{
        width: 85%;
        height: 50px;
        float: right;
        margin-right: 20px;
        line-height: 3px;
        padding-left: 0 !important;
        .seachContent{
          font-size:18px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          padding-top: 0px;
          color:rgba(51,51,51,1);
        }
        .seachtitle{
          font-size:12px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(102,102,102,1);
        }
      }
    }
    width: 100%;
    min-height: 100%;
    .equipNav{
      width: 100%;
      height: 50px;
      .leftTop{
        width: 50%;
        height: 50px;
        float: left;
        margin: 5px 0 0 20px ;
        font-size:16px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(50,56,66,1);

        .leftTitle{
          font-size: 16px;
          color: #676A70;
          padding-left: 5px;
          /*border-left: 5px solid #25B6C7;*/
          height: 16px;
        }
      }
      .rightBtn{
        float: right;
        font-size:14px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(37,183,200,1);
        cursor: pointer;
        margin: 15px 20px 0 0 ;
      }
      .clearfix:after{
        content: " ";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
    }
    .formContent{
      width: 98%;
      height: 800px;
      margin-left: 20px;
      border: 1px solid #DDE2EB;
      //  position: relative;
      overflow: auto;
      /*border: 1px solid red;*/

      .firstContent{
        width: 100%;
        min-height: 590px;
        /*border: 1px solid fuchsia;*/
      }
      .firstTitle{
        width: 99%;
        height: 40px;
        margin-left: 10px;
        border-bottom: 1px solid #DDE2EB;
        // position: relative;
        /*border: 1px solid greenyellow;*/
        .info{
          font-size:14px;
          font-family:MicrosoftYaHei-Bold;
          font-weight:bold;
          color:rgba(50,56,66,1);
          float: left;
          line-height: 40px;
        }
        .down{
          float: right;
          line-height: 40px;
          cursor: pointer;
        }
      }
      .twoContent{
        width: 100%;
        height: 490px;
        margin-top: 30px;

        /*border-bottom: 1px solid #DDE2EB;*/
      }

      .twoTitle{
        width: 99%;
        height: 40px;
        margin-left: 10px;
        border-bottom: 1px solid #DDE2EB;
        // position: relative;
        margin-top: 20px;
        .info{
          font-size:14px;
          font-family:MicrosoftYaHei-Bold;
          font-weight:bold;
          color:rgba(50,56,66,1);
          float: left;
          line-height: 40px;
        }
        .down{
          float: right;
          line-height: 40px;
          cursor: pointer;
        }
      }
    }
    .contentInfo1{
      width: 1200px;
      min-height: 1px;
      // position: relative;
      margin-top: 30px;
      line-height: 37px;
      font-size:14px;
      font-family:MicrosoftYaHei;
      font-weight:400;
      color:rgba(105,114,126,1);
      /*border: 1px solid red;*/
    }
    .contentInfo2{
      width: 1200px;
      min-height: 1px;
      // position: relative;
      margin-top: 30px;
      line-height: 37px;
      font-size:14px;
      font-family:MicrosoftYaHei;
      font-weight:400;
      color:rgba(105,114,126,1);
      /*border: 1px solid red;*/
    }
  }
  @media screen and(min-width: 1366px) {
    .formContent {
      width: 98%;
      height: 550px;
      border: 1px solid #DDE2EB;
      // position: relative;
      overflow: auto;
    }
  }
  /************输入框与文本域样式************/
  input{
    width: 250px;
    height: 25px;
    border-radius: 4px;
    border: 1px solid #CCC;
    outline: none;
    text-indent: 15px;
  }
  input::-webkit-input-placeholder{
    color: #C0C4CC;
  }
  textarea{
    margin: 0px;
    outline: none;
    width: 700px;
    height: 107px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .longInput{
    width: 701px;
  }
  /** 去除input输入框样式 */
  input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  /************下拉框样式************/
  /deep/ .el-input__inner{
    height: 25px;
    width: 250px;
    outline: none;
  }
  /************底部按钮样式************/
  .equipFooter{
    margin-top: 10px;
    float: right;
    width: 11%;
  }
  /deep/ .equipFooter > .el-button{
    padding: 8px 15px;
    width: 80px;
    height: 30px;
  }
  /deep/ .equipFooter > .el-button + .el-button {
    margin-left: 5px;
  }
  /****************动态添加样式*****************/
  .smallCarRated{
    margin-left: 14px;
    width: 930px;
  }
  .bigCarRated{
    margin-top: 3px;
    margin-left: 14px;
    width: 930px;
  }
  .videoBlock{
    width: 886px;
  }
  .smallLeft{
    width: 435px;
    float: left;
  }
  .smallRight{
    width: 424px;
    float: right;
  }
  .mainRight{
    width: 406px;
    float: right;
  }
  .mainSpeedRight{
    width: 417px;
    float: right;
  }
  .smallBtn{
    padding-left: 10px;
  }
  .smallInput{
    width: 250px;
    float: right;
  }
  .smallWeightInput{
    width: 120px;
    float: right;
  }
  .shortInput{
    width: 120px;
  }
  .boxRight{
    width: 30px;
  }
  /deep/ .el-table__body{
    table-layout: auto;
  }
  /deep/ .el-table td{
    padding: 0 0;
  }
  /deep/ .el-table .cell{
    padding-left: 0;
    padding-right: 0;
  }
  .tableIcon{
    font-size: 20px;
    font-weight: bold;
  }
  .el-icon-plus{
    font-weight: bold;
  }
  /deep/ .el-table--group::after, .el-table--border::after, .el-table::before{
    background-color: #ffffff !important;
  }
</style>
